<template>
    <div>

      <div style="width: 100%;box-sizing: border-box;padding: 16px 20px;">
        <gu_user_info :user_info="user_info">
              <span class="user-info-btn" slot="rightBtn" @click="userEditInfo">
                编辑
              </span>
          </gu_user_info>
      </div>

      <div style="width: 100%;box-sizing: border-box;background-color: #FFFFFF;margin-top: 10px;" v-show="nutrition_data!=null">
        <gu_line_chart ref="swip" :swiperIndex="swiperInd"
        :bgColor="'#fcb251'" :nutrition_data="nutrition_data" @swiperLover="swiperLover"></gu_line_chart>
      </div>

    </div>
</template>

<script>
import gu_user_info from './gu_user_info.vue'
import gu_line_chart from './gu_line_chart.vue'

export default {
  name: 'reg',
  data () {
    return {
      swiperInd:0,
      user_info: {name: '王小明',
        sex: '0',
        age: '12',
        height: '150',
        weight: '45',
        photo: 'http://b-ssl.duitang.com/uploads/item/201509/30/20150930140213_ZCFSr.jpeg'},
        nutrition_data:null,

    }
  },
  methods:{
    userEditInfo(){
      console.log("aaaaa")
    },

    changIndex(index){
      this.swiperInd = index
    },

    swiperLover(item){
      console.log(item)
      return false
      let date_time = item.date_time.split(",")
      let data = {}
      if(date_time.length == 1){
        data.start_time = date_time[0]
        data.end_time = date_time[0]
      }else{
        data.start_time = date_time[0]
        data.end_time = date_time[1]
      }
    }
  },
  mounted() {
    this.nutrition_data = {
          proposal:"3200",//建议值
          average:"1440",
          average_percentage:"50%",
          heat_company:"千卡",//热量单位
          carbohydrate_company:"克",//碳水化合物单位
          protein_company:"克",//蛋白质单位
          fat_company:"克",//脂肪单位
          data:[
             {heat:50,percentage:"0",title:"11",day:"3月11日",carbohydrate:"120",protein:"160",fat:"39"},
             {heat:50,percentage:"0",title:"12",day:"3月12日",carbohydrate:"120",protein:"160",fat:"39"},
             {heat:50,percentage:"0",title:"13",day:"3月13日",carbohydrate:"120",protein:"160",fat:"39"},
             {heat:50,percentage:"0",title:"14",day:"3月14日",carbohydrate:"120",protein:"160",fat:"39"},
             {heat:50,percentage:"0",title:"15",day:"3月15日",carbohydrate:"120",protein:"160",fat:"39"},
             {heat:50,percentage:"0",title:"16",day:"3月16日",carbohydrate:"120",protein:"160",fat:"39"},
             {heat:50,percentage:"76%",title:"17",day:"3月17日",carbohydrate:"120",protein:"160",fat:"39"},
             {heat:50,percentage:"53%",title:"18",day:"3月18日",carbohydrate:"120",protein:"160",fat:"39"},
             {heat:50,percentage:"81%",title:"19",day:"3月19日",carbohydrate:"120",protein:"160",fat:"39",date_time:"2020-4-07"},
             {heat:50,percentage:"76%",title:"20",day:"3月20日",carbohydrate:"120",protein:"160",fat:"39",date_time:"2020-4-07,2020-4-12"},

          ]
      }

      let index =  this.nutrition_data.data.length - 1
      this.$refs.swip.initSwiper(index)
  },
  components: {
    gu_user_info, gu_line_chart
  }
}
</script>

<style>
  *{
    margin:0;
    padding:0;
  }
  html{
    background-color: #f0f0f0;

  }
  body{
    background-color: #f0f0f0;
    margin:0;
    padding:0;
  }
  .user-info-btn{
    color: #fbb351;
    white-space: nowrap;
    font-size: 12px;
    padding-left:10px;
    cursor: pointer;
  }
</style>
